<template>
  <div>
    <h1>发送消息</h1>
    <div style="width: 700px;height: 300px">
      <div style="float: left;width: 300px;height: 300px">
        <el-form>
          <el-form-item label="标题:" style="width: 250px">
            <el-input v-model="name"></el-input>
          </el-form-item>
        </el-form>
        开始时间:
        <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
        <el-form>
          <el-form-item label="内容:" style="width: 250px">
            <el-input v-model="centen"></el-input>
          </el-form-item>
        </el-form>
        <!--    优先级: &ensp;-->
        <!--    <el-select v-model="priority" placeholder="请选择优先级">-->
        <!--      <el-option-->
        <!--          v-for="item in options"-->
        <!--          :key="item.value"-->
        <!--          :label="item.label"-->
        <!--          :value="item.value">-->
        <!--      </el-option>-->
        <!--    </el-select>-->

      </div>
      <div style="float: right;width: 300px;height: 300px">
        状态:&emsp;&emsp;
        <el-select v-model="essage" placeholder="请选择状态类型">
          <el-option
              v-for="item in message_listxiala"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        结束时间:
        <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

        通告类型:
        <el-select v-model="tongg" placeholder="请选择通告类型">
          <el-option
              v-for="item in tongg_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click="get_Data_tong">
          </el-option>
        </el-select>
      </div>
    </div>


    <van-popup v-model:show="show" style="width: 900px;height: 500px">
      <h1>选择用户</h1>
      <table cellspacing="1" cellpadding="10px" width="850px" style="text-align: center" border="1">
        <tr>
          <td>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" shape="square"></van-radio>
            </van-radio-group>

          </td>
          <td>账号</td>
          <td>姓名</td>
          <td>性别</td>
          <td>手机号</td>
          <td>邮箱</td>
          <td>工号</td>
          <td>状态</td>
          <td>角色</td>
        </tr>
        <tr v-for="i in dicts" :key="i">
          <td>
<!--            <van-radio-group v-model="radio" direction="horizontal">-->
<!--              <van-radio :name="i.id" shape="square" @click="del_user(i.id)"></van-radio>-->
<!--            </van-radio-group>-->
            <van-checkbox-group v-model="result">
              <van-checkbox :name="i.id" @click="del_user(i.id)"></van-checkbox>
            </van-checkbox-group>
          </td>
          <td>{{ i.username }}</td>
          <td>{{ i.name }}</td>
          <td>{{ get_geder(i.geter) }}</td>
          <td>{{ i.phone }}</td>
          <td>{{ i.email }}</td>
          <td>{{ i.jobnum }}</td>
          <td>{{ get_type(i.user_type) }}</td>
          <td>{{ chen_role(i.roleid) }}</td>
        </tr>
      </table>
      <van-button @click="que_reslit">确认</van-button>
    </van-popup>
    <van-button @click="get_Data">确定</van-button>
  </div>
</template>

<script>
export default {
  name: "my_message",
  data() {
    return {
      // // 消息类型:
      // options: [{
      //   value: 1,
      //   label: '高'
      // }, {
      //   value: 2,
      //   label: '中'
      // }, {
      //   value: 3,
      //   label: '低'
      // }],
      // 状态:
      message_listxiala: [{
        value: 1,
        label: '可用'
      }, {
        value: 2,
        label: '不可用'
      }],
      // 通告类型:
      tongg_list: [{
        value: 1,
        label: '全体成员'
      }, {
        value: 2,
        label: '指定成员'
      }, {
        value: 3,
        label: '指定部门'
      }],
      // 结束时间
      value1: '',
      // 开始时间
      value2: '',
      // 通告类型
      tongg: 1,
      centen: '',
      // 状态类型
      essage: 1,
      // 优先级
      priority: 1,
      name: '',
      show: false,
      dicts: [],
      radio: '',
      dict: {1: '正常', 2: '冻结'},
      geder:{1:'男',2:'女'},
      rselist:{1:'总经理',2:'副总经理',3:'项目经理',4:'小组组长'},
      result:[],
      result_list:[],
    }
  },
  methods: {
    que_reslit(){
      this.show=false
    },
    chen_role(id){
      return this.rselist[id]
    },
    get_geder(geder){
      return this.geder[geder]
    },
    del_user(id) {
      console.log(id)
      this.pid = id
      console.log(this.result)
      console.log(this.result)
    },
    get_type(type) {
      return this.dict[type]
    },
    get_Data_tong() {
      if (this.tongg == 2) {
        this.show = true
      }

    },
    get_Data(value) {
      console.log(value)
      if (this.value1 > this.value2) {
        this.$toast.fail('开始时间不能大于结束时间')
      }
      console.log(this.name)
      console.log(this.value2)
      console.log(this.value1)
      console.log(this.priority)
      this.myaxios('http://localhost:5000/send_message', 'post', {
        'name': this.name,
        'value1': this.value1,
        'value2': this.value2,
        'tongg': this.tongg,
        'essage': this.essage,
        'centen': this.centen,
        'result':this.result
      })
          .then(res => {
            console.log(res)
          })
    },
    get_daa(){
      this.myaxios("http://localhost:5000/get_userguan", 'get', {'page': 1})
          .then(res => {
            console.log(res)
            this.dicts = res.data.list
            console.log(this.dicts)
          })
    }
  },
  mounted() {
    this.get_daa()
  }
}
</script>

<style scoped>

</style>
